<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <DataTable/>
            </n-icon>
            <Handle id="TableCleaning-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="TableCleaning-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>表清洗</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="表清洗">

                <p>清洗整个表格</p>
                <n-checkbox v-model:checked="repeat">
                    删除重复项（行）
                </n-checkbox>
                <n-checkbox v-model:checked="empty_row">
                    删除空行（从此表中删除所有字段空白的行）
                </n-checkbox>
                <n-checkbox v-model:checked="delete_row_boolean">
                    <div class="a">
                        删除第
                        <n-input-number @click.stop v-model:value="delete_row[0]"/>
                        行---第
                        <n-input-number @click.stop v-model:value="delete_row[1]"/>
                        行
                    </div>

                </n-checkbox>

                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="implementation">计算</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {DataTable} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        popup.show = false;
    },
    reopen: () => {
        popup.show = true
    }
})

const repeat = ref(false)
const empty_row = ref(false)
const delete_row_boolean = ref(false)
const delete_row = ref([0,0])
function implementation() {
    workApi.post("perform_tasks/table_cleaning",{
        data:props.data.data,
        operation:{
            repeat:repeat.value,
            empty_row:empty_row.value,
            delete_row_boolean:delete_row_boolean.value,
            delete_row:delete_row.value
        }
    }).then(r=>{
        props.data.data = r.data
    })
}

const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}

</script>

<style scoped lang="less">
.n-card {
    width: 500px;
    .n-checkbox{
        align-items: center;
    }
    .a{
        display: flex;
        align-items: center;
        .n-input-number{
            width: 80px;
        }
    }
}
</style>